<template>
  <basic-container>
    <avue-crud
      :data="data"
      :page.sync="page"
      :option="option"
      v-model="obj"
      ref="crud"
      @row-save="rowSave"
      @on-load="onlists"
      @row-update="rowUpdate"
      :before-open="beforeOpen"
      @row-del="rowDel"
      :table-loading="orderLoading"
      @search-change="searchChange"
      @toggleSelection="toggleSelection"
      @selection-change="selectionChange"
    >
      <template slot-scope="scope" slot="menu">
        <el-button type="text" @click.stop="onrowEdits(scope.row,scope.index)">编辑</el-button>
      </template>
      <template slot="menuLeft" slot-scope="{size}">
        <el-button type="danger" :size="size" @click="toggleSelection()">多选删除（ 已选{{selectLen}} ）</el-button>
      </template>
      <template slot-scope="{type,disabled}" slot="dmForm">
        <avue-select v-model="dm" placeholder="请选择DM用户" :dic="dmList"></avue-select>
      </template>
      <template slot-scope="{type,disabled}" slot="scriptForm">
        <avue-select v-model="script" placeholder="请选择剧本名称" :dic="scriptList"></avue-select>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {userList,adduserList,deleteuserList,getList,updateuserList} from "@/api/ReservationRecord";
import {dmList} from "@/api/dm";
import {jubendmList} from "@/api/scriptDetail";
export default {
  data() {
    return {
      data: [],
      dmList: [],
      scriptList: [],
      dm: '',
      script: '',
      obj:{},
      query:{},
      selectLen: 0,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        "pageSizes": [
          10,
          20,
          30,
          40,
          50,
          100
        ],
        "background": true
      },
      orderLoading: false,
      option:{
        align:'center',
        menuAlign:'center',
        menuWidth:400,
        viewBtn:false,
        editBtn: false,
        menuTitle:'操作',
        addTitle: '保存',
        selection: true,
        tip: false,
        editTitle: '编辑用户',
        searchBtnText:'搜索',
        emptyBtnText:'清空',
        addBtnText:'新增用户',
        delBtnText: '删除',
        delBtnIcon:'null',
        editBtnIcon:'null',
        updateBtnText:'保存',
        saveBtnText:'保存',
        cancelBtnText:'取消',
        column:[
          {
            label:'剧本名称',
            prop:'script',
            hide: true,
            props: {
              label: 'name',
              value: 'id'
            },
          },
          {
            label:'剧本名称',
            prop:'script_name',
            editDisplay: false,
            addDisplay: false,
          },
          {
            label:'DM用户',
            prop:'dm_nickname',
            editDisplay: false,
            addDisplay: false,
          },
          {
            label:'DM用户',
            prop:'dm',
            hide:true,
            props: {
              label: 'name',
              value: 'id'
            },
          },
          {
            label:'预约用户联系方式',
            prop:'create_user_mobile_phone',
            editDisplay: false,
            addDisplay: false,
            search: true,
            searchLabelWidth: 130
          },
          {
            label:'预约用户昵称',
            prop:'create_user_nickname',
            editDisplay: false,
            addDisplay: false,
          },
          {
            label:'开始时间',
            prop:'s_time',
            type: "datetime",
            valueFormat: 'yyyy-MM-dd hh:mm:ss',
            format:'yyyy-MM-dd hh:mm:ss',
          },
          {
            label:'截止时间',
            prop:'e_time',
            type: "datetime",
            valueFormat: 'yyyy-MM-dd hh:mm:ss',
            format:'yyyy-MM-dd hh:mm:ss',
          },
          {
            label:'用户备注',
            prop:'user_remark',
            maxlength:20,
            showWordLimit:true,
            type:'textarea',
            editDisabled: true,
            addDisplay: false,
          },
          {
            label:'店员备注',
            maxlength:20,
            showWordLimit:true,
            prop:'worker_remark',
            type:'textarea',
            hide: true,
          },
        ]
      },
    };
  },
  mounted() {
    this.dm_List()
    this.jubendmList()
  },
  methods: {
    //获取列表
    onlists(page,params = {}) {
      this.orderLoading = true;
      userList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        this.orderLoading = false;
        this.data = res.data.data.list
        this.page.total = res.data.data.total
      })
    },
    //获取dm列表
    dm_List(){
      dmList({no_page:true}).then(res=>{
        this.dmList = res.data.data.map(v=>{return {label:v.nickname,value:v.id}})
      })
    },
    //获取剧本列表
    jubendmList(){
      jubendmList({no_page:true}).then(res=>{
        this.scriptList = res.data.data.map(v=>{return {label:v.name,value:v.id}})
      })
    },
    //搜索
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage=1
      this.onlists(this.page, params);
      done();
    },
    //新增
    rowSave(row,done, loading) {
      loading()
      const {dm,script} = this
      const {s_time,e_time,user_remark,worker_remark} = row
      const parmise = {dm,script,s_time,e_time,user_remark,worker_remark}
      if(script === '') return  this.$message({message: '请先选择剧本',type: 'warning'});
      if(dm === '') return  this.$message({message: '请先选择DM用户',type: 'warning'});
      if(s_time === '') return  this.$message({message: '请先开始时间',type: 'warning'});
      if(e_time === '') return  this.$message({message: '请先选择截至时间',type: 'warning'});
      console.log(parmise)
      adduserList(parmise).then(() => {
        this.onlists(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      });
      done()
    },
    //更新
    rowUpdate(row, index, loading, done) {
      const {dm,script} = this
      const {s_time,e_time,user_remark,worker_remark} = row
      const parmise = {dm,script,s_time,e_time,user_remark,worker_remark}
      loading()
      updateuserList(row.id,parmise).then(() => {
        this.onlists(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        done();
        console.log(error);
      });
    },
    // 删除
    rowDel(row,index,ids) {
      const idList = row.id || ids
      if(idList){
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return deleteuserList(idList);
          })
          .then(() => {
            this.onlists(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      }
    },
    //获取详情
    onrowEdits(row, index){
      this.$refs.crud.rowEdit(row, index)
      getList(row.id).then((res) => {
        const {dm,script} = res.data.data
        this.dm = dm
        this.script = script
        this.obj = res.data.data
      })
    },
    //多选删除
    toggleSelection(){
      this.selectLen = this.$refs.crud.selectLen
      const ids = this.$refs.crud.tableSelect.map(v=>{return v.id}).join(',')
      this.rowDel('','',ids)
    },
    selectionChange(){
      this.selectLen = this.$refs.crud.selectLen
    },
    //弹窗打开
    beforeOpen(done,type){
      if(type === 'add') {
        this.script = ''
        this.dm = ''
      }
      done()
    },
  },
}
</script>

<style>
.avue-form__menu--center{
  text-align: right;
}
</style>
